<template>
    <el-card style="max-width: 100%">
        <el-header class="header">
            <el-select placeholder="OpenDI 查询:" v-model="openid_find" multiple collapse-tags style="width: 240px">
                <el-option v-for="item in tableData" :key="item" :label="item.name" :value="item.name"/>
            </el-select>
            <el-button @click="Game_Find" class="button" type="success">
                <el-icon>
                    <Search/>
                </el-icon>
                游戏查询查询
            </el-button>
            <el-button @click="query" class="button" type="success">
                <el-icon>
                    <Search/>
                </el-icon>
                openid查询
            </el-button>

            <el-button @click="Realtime" class="button" type="success">
                <el-icon>
                    <el-icon>
                        <Clock/>
                    </el-icon>
                </el-icon>
                实时数据
            </el-button>

            <el-button @click="resetting" class="button" type="success">
                <el-icon>
                    <RefreshLeft/>
                </el-icon>
                重置
            </el-button>
        </el-header>
        <div>
            <el-table :data="Game_user_list" border style="width: 100%;height: 460px;" v-loading="loading">
                <el-table-column prop="appid" label="appid" align="center"/>
                <el-table-column prop="openid" label="openid" align="center"/>
                <el-table-column prop="session_key" label="session_key" align="center"/>
                <el-table-column prop="unionid" label="unionid" align="center"/>
                <el-table-column prop="_id" label="_id" align="center"/>
            </el-table>
        </div>
        <el-main>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                           :total="total"></el-pagination>
        </el-main>
    </el-card>

</template>

<script setup lang="ts">
import clipBoard from 'vue-clipboard3'//复制文本的引入
import {Stoer_Game_user} from '../../store/store_game_user'
import {ElMessage} from 'element-plus'//消息提示
import {ref, onMounted, watch} from 'vue';
import {GameUser} from '../../request/api'//接口封装
import type {GameUser_list} from '../../type/infolist'//类型定义
let Game_user_list = ref<GameUser_list[]>([])//数据列表
const currentPage = ref<number>(1);
let {toClipboard} = clipBoard();    // 一键复制
const total = ref<number>(10);
const pageSize = ref<number>(10);
const pages = ref<GameUser_list[]>([])
const pags_length = ref(9)
let page_pagination = ref<number>(10)
let r = ref<number>(10)
let i = ref<number>(0)
let sum = ref<number>(0)
let and = ref<number>(0)
let number = ref<number>(0)
let loading = ref(true)
onMounted(() => {
    init()
})
let init = async () => {


    console.log(number.value, and.value, 'zhuss');
    Game_user_list.value = Stoer_Game_user().stoer_game_user
    if (Game_user_list.value.length == 0) {
        let res: any = await GameUser()
        Stoer_Game_user().Get_game_user(res)
        Game_user_list.value = Stoer_Game_user().stoer_game_user
        pages.value = Stoer_Game_user().stoer_game_user
        console.log("页面发送请求");

    } else {
        Game_user_list.value = Stoer_Game_user().stoer_game_user
        pages.value = Stoer_Game_user().stoer_game_user
        console.log('页面没有发送请求');

    }
    Game_user_list.value = []
    for (let index = 0; index < pages.value.length; index++) {
        if (index <= pageSize.value - 1) {
            if (number.value <= total.value) {
                if (and.value == 0) {
                    Game_user_list.value.push(pages.value[index + number.value])
                } else {
                    Game_user_list.value.push(pages.value[index + number.value * and.value])
                }

            }

        }
    }
    loading.value = false
    total.value = pages.value.length

}


let paging = () => {
    Game_user_list.value = []
    for (let index = 0; index < pages.value.length; index++) {
        let subscript = index
        if (index + pags_length.value + 1 <= r.value) {
            if (r.value <= total.value) {
                console.log("进入条件");
                subscript = index + i.value

                Game_user_list.value.push(pages.value[subscript])

            } else if (total.value <= r.value - sum.value) {
                subscript = index + i.value
                console.log(index + i.value);

                Game_user_list.value.push(pages.value[subscript])
            }
        }
    }
}
let openid_find = ref<[]>([])
//重置
let resetting = () => {

}
//Realtime 实时数据
let Realtime = () => {
}
//openid查询
let query = () => {

}
//游戏名称查询
let Game_Find = () => {

}

const handleSizeChange = (val: number) => {
    and.value = val / 10
    pageSize.value = val
    page_pagination.value = val
    console.log(pageSize.value);
    init()
    handleCurrentChange(currentPage.value)

};

const handleCurrentChange = (val: number) => {
    number.value = val * 10 - 10
    pageSize.value = page_pagination.value
    i.value = pags_length.value = val * 10 - 10
    r.value = val * 10
    sum.value = r.value - total.value
    currentPage.value = val
    paging()
    init()
};
watch(pageSize, () => {
    console.log('监听');

})

</script>

<style scoped></style>